document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.getElementById('loginForm');
    const errorMessage = document.getElementById('errorMessage');
    const successMessage = document.getElementById('successMessage');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const captchaInput = document.getElementById('captcha');
    const captchaImage = document.getElementById('captchaImage');
    
    // 统一的重置表单函数
    const resetForm = () => {
        usernameInput.value = '';
        passwordInput.value = '';
        captchaInput.value = '';
        captchaImage.click(); // 刷新验证码
        errorMessage.textContent = '';
        errorMessage.style.display = 'none';
        successMessage.textContent = '';
        successMessage.style.display = 'none';
    };
    
    // 处理错误的通用函数
    const handleError = (message, loginButton, originalButtonText) => {
        // 显示错误信息
        errorMessage.textContent = message;
        errorMessage.style.display = 'block';
        
        // 添加抖动效果
        errorMessage.classList.add('shake');
        setTimeout(() => loginForm.classList.remove('shake'), 500);
        
        // 2秒后重置表单并恢复按钮状态
        setTimeout(() => {
            resetForm();
            loginButton.textContent = originalButtonText;
            loginButton.disabled = false;
        }, 2000); // 为2秒后清空
    };
    
    loginForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const username = usernameInput.value.trim();
        const password = passwordInput.value.trim();
        const captcha = captchaInput.value.trim();
        
        // 清除之前的提示信息和定时器
        clearTimeout(window.loginErrorTimeout);
        errorMessage.textContent = '';
        errorMessage.style.display = 'none';
        successMessage.textContent = '';
        successMessage.style.display = 'none';
        
        // 显示加载状态
        const loginButton = loginForm.querySelector('button');
        const originalButtonText = loginButton.textContent;
        loginButton.textContent = '登录中...';
        loginButton.disabled = true;
        
        try {
            // 1. 验证用户名和密码非空
            if (!username) {
                handleError('请输入用户名', loginButton, originalButtonText);
                return;
            }
            
            if (!password) {
                handleError('请输入密码', loginButton, originalButtonText);
                return;
            }
            
            // 2. 先验证用户名和密码是否正确
            const authResponse = await window.electronAPI.sendLoginRequest({ username, password });
            
            if (!authResponse.success) {
                // 用户名或密码错误处理
                handleError(authResponse.message || '用户名或密码错误', loginButton, originalButtonText);
                return;
            }
            
            // 3. 再验证验证码是否正确
            if (!captcha) {
                handleError('请输入验证码', loginButton, originalButtonText);
                return;
            }
            
            if (!window.validateCaptcha()) {
                handleError('验证码错误，请重新输入', loginButton, originalButtonText);
                return;
            }
            
            // 4. 所有验证通过，登录成功
            successMessage.textContent = '登录成功！正在进入系统...';
            successMessage.style.display = 'block';
            window.electronAPI.notifyLoginSuccess(authResponse.user);
            
        } catch (error) {
            handleError('登录失败: ' + error.message, loginButton, originalButtonText);
        }
    });
    
    // 添加抖动动画
    const style = document.createElement('style');
    style.textContent = `
        .shake {
            animation: shake 0.5s;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
            20%, 40%, 60%, 80% { transform: translateX(10px); }
        }
    `;
    document.head.appendChild(style);
});